<script setup>
import { ref, reactive } from "vue";
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'

const textarea = ref('')
const textarea1 = ref('')
const textarea2 = ref('')
const textarea3 = ref('')
const value = ref('')
const dangername = ref('')
<<<<<<< HEAD
const sex1 = ref('')
=======

>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
const options = [
    {
        value: '重庆',
        label: '重庆',
    },
    {
        value: '成都',
        label: '成都',
    },
    {
        value: '杭州',
        label: '杭州',
    },
    {
        value: '北京',
        label: '北京',
    },
    {
        value: '上海',
        label: '上海',
    },
]
<<<<<<< HEAD
const sexs = [
    {
        sex1: '男',
        label: '男',
    },
    {
        sex1: '女',
        label: '女',
    },
]
=======
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
let obj = reactive([
    {
        title: "法定全名",
        message: "编辑",
        content: "请设置姓名"
    },
    {
        title: "性别",
        message: "编辑",
        content: "未说明"
    },
    {
        title: "电子邮箱",
        message: "编辑",
        content: "未提供"
    },
    {
        title: "手机号",
        message: "编辑",
        content: "请设置"
    },
    {
        title: "政府签发的身份证件",
        message: "添加",
        content: "未提供"
    },
    {
        title: "地址",
        message: "编辑",
        content: "未提供"
    },
    {
        title: "紧急联系人",
        message: "编辑",
        content: "未提供"
    },
])
let hide0 = ref(true)
let hide1 = ref(true)
let hide2 = ref(true)
let hide3 = ref(true)
let hide4 = ref(true)
let hide5 = ref(true)
let hide6 = ref(true)
let personenter0 = ref(false)
let personenter1 = ref(false)
let personenter2 = ref(false)
let personenter3 = ref(false)
let personenter4 = ref(false)
let personenter5 = ref(false)
let personenter6 = ref(false)
// 手动排他
let massage0 = (e) => {
    if (hide0.value == true) {
        hid.value = "block"
        hide0.value = !hide0.value
        personenter0.value = true
    } else {
        hide0.value = !hide0.value
        personenter0.value = false
    }
}
let massage1 = (e) => {
    if (hide1.value == true) {
<<<<<<< HEAD
        hid.value="block"
=======
        // hid.value="block"
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
        hide1.value = !hide1.value
        personenter1.value = true
    } else {
        hide1.value = !hide1.value
        personenter1.value = false
    }
}
let massage2 = (e) => {
    if (hide2.value == true) {
<<<<<<< HEAD
        hid.value="block"
=======
        // hid.value="block"
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
        hide2.value = !hide2.value
        personenter2.value = true
    } else {
        hide2.value = !hide2.value
        personenter2.value = false
    }
}
let massage3 = (e) => {
    if (hide3.value == true) {
<<<<<<< HEAD
        hid.value="block"
=======
        // hid.value="block"
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
        hide3.value = !hide3.value
        personenter3.value = true
    } else {
        hide3.value = !hide3.value
        personenter3.value = false
    }
}
let massage5 = (e) => {
    if (hide5.value == true) {
<<<<<<< HEAD
        hid.value="block"
=======
        // hid.value="block"
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
        hide5.value = !hide5.value
        personenter5.value = true
    } else {
        hide5.value = !hide5.value
        personenter5.value = false
    }
}
let massage6 = (e) => {
    if (hide6.value == true) {
<<<<<<< HEAD
        hid.value="block"
=======
        // hid.value="block"
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
        hide6.value = !hide6.value
        personenter6.value = true
    } else {
        hide6.value = !hide6.value
        personenter6.value = false
    }
}
// 点击修改
let button_info = () => {
    obj[0].content = textarea.value
    hide0.value = !hide0.value
    personenter0.value = !personenter0.value
    hid.value = "none"
}
let button_sex = () => {
<<<<<<< HEAD
    obj[1].content = sexvalue.value
=======
    obj[1].content = sex.value
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
    hide1.value = !hide1.value
    personenter1.value = !personenter1.value
    hid.value = "none"

}
let button_email = () => {
    obj[2].content = textarea1.value
    hide2.value = !hide2.value
    personenter2.value = !personenter2.value
    hid.value = "none"

}
let button_phone = () => {
    obj[3].content = textarea2.value
    hide3.value = !hide3.value
    personenter3.value = !personenter3.value
    hid.value = "none"

}
let button_city = () => {
    obj[5].content = value.value
    hide5.value = !hide5.value
    personenter5.value = !personenter5.value
    hid.value = "none"

}
let button_danger = () => {
    obj[6].content = textarea3.value
    hide6.value = !hide6.value
    personenter6.value = !personenter6.value
    hid.value = "none"

}

// 下拉框
const dropdown1 = ref()
function handleVisible2(visible) {
    if (visible) {
        dropdown1.value.handleClose()
    } else {
        dropdown1.value.handleOpen()
    }
}
function showClick() {
    dropdown1.value.handleOpen()
}
let sex = ref("性别")
<<<<<<< HEAD
let sexvalue=ref("")
let man = (value) => {
    sexvalue.value=value    
}

=======
let man = () => {
    sex.value = "男"
}
let woman = () => {
    sex.value = "女"
}
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
// 模态弹窗
let hid = ref("none")

</script>

<template>
    <div class="outbox">
        <!-- 用户姓名 -->
        <div class="window_mohu"></div>
        <div class="usebox">
            <div class="message">
                <div>{{obj[0].title}}</div>
                <strong @click="massage0($event)">{{obj[0].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter0">
                <p>这是您旅行证件（驾照或护照）上的名字</p>
                <el-input class="elinput" v-model="textarea" :rows="2" type="textarea" placeholder="请输入全名" />
                <el-row class="mb-4">
                    <el-button type="info" round @click="button_info">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide0">--{{obj[0].content}}</p>
            <hr />
        </div>
        <!-- 用户性别 -->
        <div class="usebox">
            <div class="message">
                <div>{{obj[1].title}}</div>
                <strong @click="massage1($event)">{{obj[1].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter1">
<<<<<<< HEAD
                <el-select v-model="sexvalue" filterable placeholder="请选择性别">
                    <el-option @click="man(item.sex1)" v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
               
=======

                <div style="{margin: 15px,z-index: 3}">
                    <el-button class="sex_botton" @click="showClick">{{sex}}</el-button>
                </div>
                <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
                    <span class="el-dropdown-link"> ---请选择性别 </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="man">男</el-dropdown-item>
                            <el-dropdown-item @click="woman">女</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
>>>>>>> d9b44e0129c3c6bc2da618cf4b5422a00b0423f7
                <el-row class="mb-4">
                    <el-button type="info" round @click="button_sex">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide1">--{{obj[1].content}}</p>
            <hr />
        </div>
        <!-- 电子邮箱 -->
        <div class="usebox">
            <div class="message">
                <div>{{obj[2].title}}</div>
                <strong @click="massage2($event)">{{obj[2].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter2">
                <p>使用您始终可以访问的电子邮件地址</p>
                <el-input class="elinput" v-model="textarea1" :rows="2" type="textarea" placeholder="电子邮箱地址" />
                <el-row class="mb-4">
                    <el-button type="info" round @click="button_email">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide2">--{{obj[2].content}}</p>
            <hr />
        </div>
        <!-- 手机号 -->
        <div class="usebox">
            <div class="message">
                <div>{{obj[3].title}}</div>
                <strong @click="massage3($event)">{{obj[3].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter3">
                <p>用于通知、提醒和登录帮助</p>
                <el-input class="elinput" v-model="textarea2" :rows="2" type="textarea" placeholder="点击修改" />
                <el-row class="mb-4">
                    <el-button type="info" round @click="button_phone">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide3">--{{obj[3].content}}</p>
            <hr />
        </div>
        <div class="usebox">
            <div class="message">
                <div>{{obj[4].title}}</div>
                <strong @click="massage4($event)">{{obj[4].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter4">

            </div>
            <p v-show="hide4">--{{obj[4].content}}</p>
            <hr />
        </div>
        <div class="usebox">
            <div class="message">
                <div>{{obj[5].title}}</div>
                <strong @click="massage5($event)">{{obj[5].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter5">
                <p>使用固定地址接收邮件</p>
                <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

                <el-row class="mb-4">
                    <el-button type="info" round @click="button_city">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide5">--{{obj[5].content}}</p>
            <hr />
        </div>
        <div class="usebox">
            <div class="message">
                <div>{{obj[6].title}}</div>
                <strong @click="massage6($event)">{{obj[6].message}}</strong>
            </div>
            <div class='enterover' v-show="personenter6">
                <p>如果出现紧急情况，我们可以通知的您信任的联系人。</p>
                <el-input v-model="dangername" maxlength="10" placeholder="输入联系人姓名" show-word-limit type="text" />
                <el-input class="elinput" v-model="textarea3" :rows="2" type="textarea" placeholder="点击修改" />
                <el-row class="mb-4">
                    <el-button type="info" round @click="button_danger">提交</el-button>
                </el-row>
            </div>
            <p v-show="hide6">--联系人姓名:{{dangername}}</p>
            <p v-show="hide6">--联系方式:{{obj[6].content}}</p>
            <hr />
        </div>
    </div>
</template>

<style scoped lang="scss">
.outbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .usebox {
        width: 80%;
        margin-bottom: 20px;

        .message {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            strong {
                cursor: pointer;
            }
        }

        p {
            color: rgb(118, 118, 118);
            font-size: 14px;
        }

        .enterover {
            width: 100%;
            z-index: 3;

            p {
                margin-bottom: 10px;
            }

            .elinput {
                margin-bottom: 10px;

            }

            .sex_botton {
                z-index: 3;
            }

            .example-showcase .el-dropdown-link {
                cursor: pointer;
                color: var(--el-color-primary);
                display: flex;
                align-items: center;
            }
        }
    }

    .window_mohu {
        background-color: rgba(255, 255, 255, .8);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 0;
        top: 46px;
        display: v-bind(hid);
    }
}

.sexbutton {
    position: relative;
    left: 0;
}
</style>